<template>
	<view class="footer">
		<view class="footer_item" :class="{'big_item': item.size === 'big'}" :style="'width:'+item_width(index)" @click="change_nav(index)"
		 v-for="(item,index) in footer_nav" :key="index">
			<image :src="index==now_index?item.select_icon:item.icon" mode=""></image>
			<view :class="{'active':index==now_index}">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			change_nav(index) {
				this.$emit('change_nav', index)
			},
			item_width(index) {
				let length = this.$store.state.footer_store.footer_nav.length;
				if (index == Math.floor(length / 2)) {
					return "25%";
				}
				switch (length) {
					case 1:
						return '100%'
						break;
					case 2:
						return '50%'
						break;
					case 3:
						return '33.3%'
						break;
					case 4:
						return '25%'
						break;
					case 5:
						return '18.75%'
						break;
					default:
						break;
				}
			},
		},
		computed: {
			footer_nav() {
				return this.$store.state.footer_store.footer_nav
			},
			now_index() {
				return this.$store.state.footer_store.now_page_index;
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-footer;
		color: $uni-text-color;

		.active {
			color: $uni-text-color-active;
		}
	}

	.footer_item {
		float: left;
		text-align: center;
		font-size: 28rpx;
		height: 120rpx;
	}

	.footer_item image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
	}

	.footer_item.big_item {
		position: relative;
		top: -60rpx;
	}

	.footer_item.big_item image {
		padding: 5rpx 10rpx;
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
		background-color: #FFFFFF;
	}
</style>
